.ladder {
	position: absolute;
	height: 100%;
	width: 50%;
}

.ladder .container {
	padding: 4ex 0;
}

.contents {
	height: 100%;
	overflow: auto;
}

.ladder .header {
	position: absolute;
	top: 0;
	border-bottom: solid 2px #aaa;
	height: 4ex;
	width: 100%;
}

.ladder .footer {
	position: absolute;
	bottom: 0;
	border-top: solid 1px #aaa;
	height: 4ex;
	width: 100%;
}

.editing .ladder .footer {
	display: none;
}

.ladder .footer button {
	display: inline;
}

.ladder .buttons {
	display: inline;
	float: right;
}

.ladder button {
	display: none;
}

.ladder .buttons .edit {
	display: inline;
}

.editing .ladder .buttons .edit {
	display: none;
}

.editing .ladder .buttons .add, .editing .ladder .buttons .done {
	display: inline;
}

.container {
	position: absolute;
	left: 1em;
	right: 1em;
	top: 1ex;
	bottom: 1ex;
	border: solid 1px #aaa;
}

.ladder .entry {
	background-color: #ccc;
	color: #444;
	border-bottom: solid 1px #aaa;
	width: 100%;
	position: relative;
	height: 3ex;
	padding: 0.5ex 0;
}

.ladder .entry button {
	position: absolute;
	float: right;
	top: 0.25ex;
	right: 0;
}

.ladder .entry {
	display: none;
}

.editing .ladder .entry, .ladder .entry.active {
	display: block;
}

.ladder .entry.active {
	background-color: white;
	color: black;
}

.toonInput {
	display: none;
}

.editing .toonInput {
	display: inline-block;
}

.editing .ladder .entry .add {
	display: block;
}

.editing .ladder .entry.active .add {
	display: none;
}

.editing .ladder .entry .remove {
	display: none;
}

.editing .ladder .entry.active .remove {
	display: block;
}

.log {
  position: absolute;
  right: 0;
  width: 50%;
  height: 100%;
}

.clear {
  display: none;
}

.editing .clear {
  display: block;
  position: fixed;
  right: 0;
  top: 0;
}